<template>
  <div class="app-container">
    <el-card v-permission="['minipro:config_detail']" class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="configGroup.wx_minipro.name" :id="configGroup.wx_minipro.id" name="wx_minipro" class="margin-10">
          <el-form ref="configForm" :model="configForm" label-width="150px">
            <el-form-item label="小程序 AppId" prop="xcxAppId">
              <el-input v-model="configForm.appId" placeholder="AppID(小程序ID)" />
            </el-form-item>
            <el-form-item label="小程序 AppSecret" prop="xcxAppSecret">
              <el-input v-model="configForm.appSecret" placeholder="AppSecret(小程序密钥)" />
            </el-form-item>
            <el-form-item label="通信授权码" prop="token">
              <el-input v-model="configForm.token" placeholder="微信小程序与后台接口通信授权码（唯一性）" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="configForm.name" placeholder="微信小程序名称" />
            </el-form-item>
            <el-form-item prop="url">
              <el-row>
                <el-col :span="12">
                  <div v-if="configForm.qrCode" class="block">
                    <el-image :src="configForm.qrCode+'_200_200'"/>
                  </div>
                  <el-button v-permission="['minipro:generate_qrcode']" type="success" plain @click="generateQrCode">生成二维码</el-button>
                </el-col>
                <el-col :span="12">
                  <div v-if="configForm.acode" class="block">
                    <el-image :src="configForm.acode+'_200_200'"/>
                  </div>
                  <el-button v-permission="['minipro:generate_acode']" type="success" plain @click="generateACode">生成小程序码</el-button>
                </el-col>
              </el-row>
              <br>
              <el-alert v-permission="['minipro:generate_qrcode','minipro:generate_acode']" title="小程序二维码和小程序码生成数量有限请勿频繁生成!" type="warning"/>
            </el-form-item>
            <el-form-item label="状态" prop="enabled">
              <el-switch v-model="configForm.enabled" :active-value="true" :inactive-value="false" active-color="#13ce66" active-text="启用" inactive-text="禁用"/>
            </el-form-item>
          </el-form>
          <div class="op-container text-center">
            <el-button v-permission="['minipro:config_setting']" :loading="submitIng" type="primary" @click="handleSave">保存更改</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { ConfigService, uploadPath } from '@/api/SystemService'
import Notify from '@/utils/notify'
import Uploader from '@/components/Uploader'
import { getToken } from '@/utils/auth'

export default {
  name: 'MiniProConfig', components: { Uploader },
  data() {
    return {
      uploadPath: uploadPath, fileList: [], activeName: 'wx_minipro', configForm: {}, submitIng: false, headers: { token: getToken() },
      configGroup: {
        wx_minipro: { id: 2, name: '微信小程序配置' }}
    }
  },
  created() {
    this.loadData(this.configGroup.wx_minipro.id)
  },
  methods: {
    loadData(type) {
      ConfigService.getWeChatConfig(type).then(res => {
        this.configForm = res
        if (this.configForm.qrCode) {
          const url = this.configForm.url
          if (url) {
            this.fileList = [{ name: url.substring(url.lastIndexOf('/')), url: url }]
          }
        } else {
          this.fileList = []
        }
      })
    },
    handleSave() {
      this.submitIng = true
      ConfigService.saveWeChatConfig(this.configForm).then(() => {
        Notify.success(this, '保存成功!')
        this.submitIng = false
      })
    },
    generateQrCode() {
      ConfigService.getWxQrCode().then(result => {
        this.configForm.qrCode = result
        Notify.success(this, '生成成功!')
      })
    },
    generateACode() {
      ConfigService.getWxACode().then(result => {
        this.configForm.acode = result
        Notify.success(this, '生成成功!')
      })
    }
  }
}
</script>
<style>
  .el-upload-list__item-name{white-space:unset;}
</style>
